<template>
    <div class="homeContent">
        <van-nav-bar title="账户管理" left-text="返回" left-arrow @click-left="onClickLeft" />
        <div class="itemList">
            <div class="item" v-for="(item, index) in itemList" :key="index">
                <div class="left">
                    <svg class="icon" v-if="item.name == '支付宝'"
                        style="width: 50px;height: 50px;vertical-align: middle;fill: currentColor;overflow: hidden;"
                        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M1024.0512 701.0304V196.864A196.9664 196.9664 0 0 0 827.136 0H196.864A196.9664 196.9664 0 0 0 0 196.864v630.272A196.9152 196.9152 0 0 0 196.864 1024h630.272a197.12 197.12 0 0 0 193.8432-162.0992c-52.224-22.6304-278.528-120.32-396.4416-176.64-89.7024 108.6976-183.7056 173.9264-325.3248 173.9264s-236.1856-87.2448-224.8192-194.048c7.4752-70.0416 55.552-184.576 264.2944-164.9664 110.08 10.3424 160.4096 30.8736 250.1632 60.5184 23.1936-42.5984 42.496-89.4464 57.1392-139.264H248.064v-39.424h196.9152V311.1424H204.8V267.776h240.128V165.632s2.1504-15.9744 19.8144-15.9744h98.4576V267.776h256v43.4176h-256V381.952h208.8448a805.9904 805.9904 0 0 1-84.8384 212.6848c60.672 22.016 336.7936 106.3936 336.7936 106.3936zM283.5456 791.6032c-149.6576 0-173.312-94.464-165.376-133.9392 7.8336-39.3216 51.2-90.624 134.4-90.624 95.5904 0 181.248 24.4736 284.0576 74.5472-72.192 94.0032-160.9216 150.016-253.0816 150.016z"
                            fill="#009FE8" />
                    </svg>
                    <svg class="icon" v-if="item.name == '微信'"
                        style="width: 50px;height: 50px;vertical-align: middle;fill: currentColor;overflow: hidden;"
                        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M337.387283 341.82659c-17.757225 0-35.514451 11.83815-35.514451 29.595375s17.757225 29.595376 35.514451 29.595376 29.595376-11.83815 29.595376-29.595376c0-18.49711-11.83815-29.595376-29.595376-29.595375zM577.849711 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763zM501.641618 401.017341c17.757225 0 29.595376-12.578035 29.595376-29.595376 0-17.757225-11.83815-29.595376-29.595376-29.595375s-35.514451 11.83815-35.51445 29.595375 17.757225 29.595376 35.51445 29.595376zM706.589595 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763z"
                            fill="#28C445" />
                        <path
                            d="M510.520231 2.959538C228.624277 2.959538 0 231.583815 0 513.479769s228.624277 510.520231 510.520231 510.520231 510.520231-228.624277 510.520231-510.520231-228.624277-510.520231-510.520231-510.520231zM413.595376 644.439306c-29.595376 0-53.271676-5.919075-81.387284-12.578034l-81.387283 41.433526 22.936416-71.768786c-58.450867-41.433526-93.965318-95.445087-93.965317-159.815029 0-113.202312 105.803468-201.988439 233.803468-201.98844 114.682081 0 216.046243 71.028902 236.023121 166.473989-7.398844-0.739884-14.797688-1.479769-22.196532-1.479769-110.982659 1.479769-198.289017 85.086705-198.289017 188.67052 0 17.017341 2.959538 33.294798 7.398844 49.572255-7.398844 0.739884-15.537572 1.479769-22.936416 1.479768z m346.265896 82.867052l17.757225 59.190752-63.630058-35.514451c-22.936416 5.919075-46.612717 11.83815-70.289017 11.83815-111.722543 0-199.768786-76.947977-199.768786-172.393063-0.739884-94.705202 87.306358-171.653179 198.289017-171.65318 105.803468 0 199.028902 77.687861 199.028902 172.393064 0 53.271676-34.774566 100.624277-81.387283 136.138728z"
                            fill="#28C445" />
                    </svg>

                </div>
                <div class="content">

                    <div class="top">
                        <span>余额</span>
                        <span>时间</span>
                        <span>记录笔数</span>
                        <span>添加天数</span>
                    </div>
                    <div class="bottom">
                        <span>{{ item.balance }}</span>
                        <span>{{ item.createTime }}</span>
                        <span>{{ item.totalNumberRecords }}笔</span>
                        <span>{{ item.days }}天</span>
                    </div>
                </div>
                <div class="del">
                    <van-icon name="delete-o" color="red" @click="handleDel(item)" />
                </div>
            </div>
        </div>
        <van-icon @click="handlePop" class="add" name="add-o" :size="'80px'" />
        <van-dialog class="accountDialog" v-model="show" title="添加账户" show-cancel-button @confirm="handleConfirm"
            @cancel="handleCancel">
            <van-field v-model="name" label="交易账户名称" />
            <van-field v-model="total" label="交易账户余额" />
        </van-dialog>

    </div>
</template>

<script>
import { addAccount, getAccount, delAccount } from "@/api/my.js"
import { Toast, Dialog } from "vant";
export default {
    data() {
        return {
            show: false,
            itemList: [

            ],
            name: "",
            total: "",
            active: 3
        }
    },
    created() {
        this.getAccount()
    },
    methods: {
        async handleDel(item) {
            Dialog.confirm({
                title: '确定删除',
                message: '是否删除该账户？',
            })
                .then(async () => {
                    // on confirm
                    const res = await delAccount(item.id)
                    if (res.code == 200) {
                        Toast.success('删除成功')
                        this.getAccount()
                    } else {
                        Toast.fail('删除失败')
                    }

                })
                .catch(() => {
                    // on cancel
                });
        },
        async getAccount() {
            const res = await getAccount()
            console.log(res, 'rse');
            this.itemList = res.data.map(item => {
                return {
                    ...item,
                    createTime: item.createTime.replace('T', ' '),
                    days: item.days || 0
                }
            })
        },
        handlePop() {
            this.show = true
        },

        onClickLeft() {
            this.$router.back()
        },
        async handleConfirm() {
            let data = {
                name: this.name,
                balance: this.total
            }
            const res = await addAccount(data)
            this.name = ''
            this.total = ''
            if (res.code != 200) {
                Toast.fail('添加失败')
            } else {
                Toast.success('添加成功')
                this.getAccount()
            }
        },
        handleCancel() {
            this.name = ''
            this.total = ''
        },
    }
};
</script>

<style lang="less" scoped>
.homeContent {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px;
    color: #fff;



    .itemList {
        margin-top: 25px;
        display: flex;
        flex-direction: column;
        color: #333;
        border-radius: 15px;

        .item {
            display: flex;
            align-items: center;
            margin-bottom: 15px;

            .left {
                width: 50px;
                height: 50px;
                // background-color: red;
                border-radius: 8px;
                margin-right: 8px;
            }

            .content {
                background-color: #f2f2f2;
                border-radius: 8px;
                padding: 8px;
                flex: 1;

                .top {
                    display: flex;

                    span {
                        flex: 1;
                        text-align: center;
                    }

                }

                .bottom {
                    display: flex;

                    span {
                        flex: 1;
                        text-align: center;
                        font-size: 12px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                }
            }

        }
    }

    .add {
        position: absolute;
        color: #007aff;
        right: 0;
        bottom: 60px;
    }

    .accountDialog {
        ::v-deep {
            .van-dialog__header {
                color: #007aff;
                padding-top: 10px;
            }

            .van-cell__value {
                border: 1px solid #007aff;
                border-radius: 5px;

                input {
                    padding-left: 5px;
                }
            }
        }
    }

}
</style>